<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/js/vue.js"></script>
    <script src="../static/js/jquery-3.5.1.js"></script>
    <script src="../static/js/axios.js"></script>

</head>
<body>
    <h1>This is my Demo</h1>
    <h2 id="javaScriptTest"></h2>
    <h2 id="jQueryTest"></h2>
    <h2 id="fetchTest"></h2>
    <h2 id="axiosTest"></h2>
    <script type="text/javascript">
        $(function (){
            javaScript_AJAX_Test();
            jquery_AJAX_Test();
            fetch_AJAX_Test();
            axios_AJAX_Test();
        })
    </script>
    <script type="text/javascript">
        //原生js实现ajax
        function javaScript_AJAX_Test() {
            const xmlHttp = new XMLHttpRequest();
            const url="http://localhost:8080/ajaxTest";
            //2.绑定监听函数
            xmlHttp.onreadystatechange = function() {
                //判断数据是否正常返回
                if(xmlHttp.readyState === 4 && xmlHttp.status === 200) {
                    //6.接收数据
                    document.getElementById("javaScriptTest").innerHTML="This is JavaScript "+xmlHttp.responseText;
                }
            }
            //3.绑定处理请求的地址,true为异步，false为同步
            //GET方式提交把参数加在地址后面?key1:value&key2:value
            xmlHttp.open("POST",url,true);
            //4.POST提交设置的协议头（GET方式省略）
            xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            //POST提交将参数，如果是GET提交send不用提交参数
            //5.发送请求
            xmlHttp.send("typeName=javaScript&type=1");
        }

        //jquery实现ajax
        function jquery_AJAX_Test(){
            $.ajax({
                //请求类型
                type:"get",
                data: {
                   typeName:"jQuery",
                   type:2
                },
                //请求路径
                url:"http://localhost:8080/ajaxTest",
                //是否异步
                async:true,
                //请求成功回调方法
                success:function(data){
                    $("#jQueryTest").html("This is JQuery "+data);
                },
                //请求失败回调方法
                error:function(err){
                    $("#jQueryTest").html("err"+err);
                }
            });
        }

        //fetch实现ajax
        function fetch_AJAX_Test(){
            fetch('http://localhost:8080/ajaxTest', {
                method: 'post',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: new URLSearchParams([
                    ["typeName", "fetch"],["type", 3]
                ]).toString()
            })
                .then(res => {
                    console.log(res);
                    return res.text();
                })
                .then(data => {
                    document.getElementById("fetchTest").innerHTML="This is fetch "+data;
                })
        }

        //axios实现ajax
        function axios_AJAX_Test(){
            axios({
                method: 'post',
                url: 'http://localhost:8080/ajaxTest',
                params: {
                    typeName: 'axios',
                    type: 4
                }
            })
                .then(function (data) {
                    $("#axiosTest").html("This is axios "+data.data);
                })
                .catch(function (error) {
                    $("#axiosTest").html("This is axios "+error);
                });
        }
    </script>
</body>
</html>